<template>
  <div class="page-container">
    <!--工具栏-->
    <div class="toolbar">
      <el-form :inline="true" :model="filters" :size="size" label-width="100px">
        <el-row class="search-input">
          <el-form-item label="退货编码：">
            <el-input v-model="filters.returnCode" clearable maxlength="80" placeholder="请输入退货编码"></el-input>
          </el-form-item>
          <el-form-item label="订单编号：">
            <el-input v-model="filters.orderNo" clearable maxlength="80" placeholder="请输入订单编号"></el-input>
          </el-form-item>
          <el-form-item label="退货状态：">
            <el-select v-model="filters.returnStatus" placeholder="全部" style="width: 200px;">
              <el-option label="未退款" value="1">未退款</el-option>
              <el-option label="已退款" value="2">已退款</el-option>
            </el-select>
          </el-form-item>
        </el-row>
        <el-row class="search-button">
          <el-form-item>
            <kt-button
              icon="fa fa-search"
              :label="$t('action.search')"
              type="primary"
              @click="findPage(filters)"
            />
          </el-form-item>
          <el-form-item>
            <kt-button
              icon="fa fa-refresh"
              :label="$t('action.reset')"
              @click="reset"
              type="primary"
            />
          </el-form-item>
        </el-row>

      </el-form>
    </div>
    <cy-table
      :operationWidth="300"
      :height="350"
      :data="pageResult"
      :columns="filterColumns"
      :showBatchDelete="false"
      :showDeleteOperation="false"
      :showSelection="false"
      :showDetailOperation="false"
      :showEditOperation="false"
      :showOperation="false"
      @findPage="findPage"
      ref="CyTable"
    ></cy-table>
  </div>
</template>

<script>
  import KtButton from "@/views/Core/KtButton";
  import CyTable from "@/views/Core/JicTable";

export default {
  components: {
    CyTable,
    KtButton,

  },
  data() {
    return {
      totalSize: 0,
      size: "small",
      filters: {
        returnCode:"",
        orderNo: "",
        returnStatus: ""
      },
      columns: [ { prop: "orderNo", label: "订单编号", minWidth: 120 },
        { prop: "productId", label: "商品id", minWidth: 120 },
        { prop: "returnId", label: "退货id", minWidth: 120 },
        { prop: "productName", label: "商品名称", minWidth: 120 },
        { prop: "storeName", label: "店铺编码", minWidth: 120 },
        { prop: "saleUnitPrice", label: "店铺名称", minWidth: 120 },
        { prop: "productNum", label: "所属平台", minWidth: 120 },
        { prop: "buyTotalAmount", label: "商品销售单价", minWidth: 120 },
        { prop: "returnAccount", label: "商品购买数量", minWidth: 120 },
        { prop: "transactionCurrency", label: "商品总金额", minWidth: 120 },
        { prop: "createTime", label: "应退金额", minWidth: 120 },
        { prop: "createTime", label: "交易币别", minWidth: 120 },
        { prop: "createTime", label: "创建时间", minWidth: 120 }
        ],
        
      filterColumns: [],
      pageRequest: { pageNum: 1, pageSize: 10 },
      pageResult: {}
    };
  },
  methods: {
    // 获取分页数据
    findPage: function (data) {
      let this_ = this;
      if (this_.filters == undefined || this_.filters == "") {
        this_.filters = {};
      }
      this_.filters.pageNum = this.pageRequest.pageNum;
      this_.filters.pageSize = this.pageRequest.pageSize;
      this.utils.request.getOrderReturnDetail(this_.filters, function (res) {
        if (res.data.rows.length==0) {
          this_.$message({message: "查询暂无数据", type: "warning"});
        }
        this_.$refs.CyTable.findPage({
          content: res.data.rows,
          total: res.data.total
        });
      });
    },
    // 处理表格列过滤显示
    initColumns: function() {
      var temp = [];
      $.each(this.columns, function(key, val) {
        temp.push(val);
      });
      this.filterColumns = temp;
    },

    reset: function() {
      if (this.filters.returnCode == ""&& this.filters.orderNo == "" && this.filters.returnStatus == "") {
        this.$message({message: "请输入查询条件", type: "warning"});
        return false
      }
      this.filters = {
        returnCode:"",
        orderNo: "",
        returnStatus: ""
      };
      this.findPage();
    },
  },
  mounted() {
    this.initColumns();
  }
};
</script>

<style scoped lang='scss'>
/deep/  .el-input__inner  {
      width: 200px;
}

 .el-form-item--mini.el-form-item,
 .el-form-item--small.el-form-item  {
      margin-bottom: 10px;
}
</style>
